
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="joda" uri="http://www.joda.org/joda/time/tags" %>

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Raid</title>
    
    <link rel="stylesheet" type="text/css" href="/css/simpleraid.css" />
    <link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.8.16.custom.css" />

    <script type="text/javascript" src="/js/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>

    <script type="text/javascript">
      $(function() {
    	  $('#createRaidDialogButton').button();
    	  $('#createRaidDialogButton').click(function(e) {
    		  showCreateRaidDialog();
    	  });
    	  
    	  $('#createRaidDate').datepicker({
    		  dateFormat: 'yy-mm-dd',
    		  firstDay: 1
    	  });
    	  
    	  $('.raidItem').click(function(e) {
    		  raidId = this.id.split("_")[1];
    		  gotoLink('raid.html?raidId=' + raidId);
    	  });
    	  
    	  $('.signup').click(function(e) {
    		   raidId = this.id.split("_")[1];
           showSignupDialog(raidId);
    	  });
    	  
    	  $('#createRaidDialog').dialog({
    		  autoOpen: false, 
    		  width: 400,
    		  height: 200,
    		  buttons: {
    			  Create: function() {
    				  $('#createRaidForm').submit();
    			  }
    		  }
    		});
    	  
    	  
    	  $('#signupDialog').dialog({
          autoOpen: false, 
          width: 400,
          height: 220,
          buttons: {
            Create: function() {
              $('#signupForm').submit();
            }
          }
        });
      });
    
      function gotoLink(url) {
    	  window.location = url;
      }
      
      function showCreateRaidDialog() {
    	  $('#createRaidDialog').dialog('open');
      }
      
      function showSignupDialog(raidId) {
  	    $('#signupRaidId').val(raidId);
    	  $('#signupDialog').dialog('open');        
  	  }
      
    </script>
    
    <style>
      
    </style>
  </head>
  <body>
  
    <jsp:include page="include/header.jsp" />
    
    <div class="main-content">
      <div style="float: right">
        <button id="createRaidDialogButton">Create raid</button>
      </div>
      <div style="clear: both"></div>
      
      <c:forEach items="${weeks}" var="week" varStatus="weekCount">
        <div class="week">
          <div class="week-number <c:if test="${weekCount.count == 2}">current-week</c:if>">
            ${week.weekNumber}
          </div>
        
          <c:forEach items="${week.weekdays}" var="day">
          
            <div class="day">
              <div class="day-number <c:if test="${day.today}">current-day</c:if>">
                <joda:format value="${day.date}" pattern="dd" />
              </div>
              
              <c:forEach items="${raids}" var="raid">
                <c:if test="${day.date.dayOfYear == raid.raidDate.dayOfYear}">
                  <div style="background-color: #CE3A3A; margin: 10px 3px 0 3px; height: 63px; color: white; cursor: pointer; border-radius: 5px; ">
                    <div class="raidItem" id="raid_${raid.raidId}" style="line-height: 40px;">
                      ${raid.raidTitle}
                    </div>
                    <div class="signup" id="signup_${raid.raidId}">
                      Signup
                    </div>
                  </div>
                  
                </c:if>
              </c:forEach>
            </div>
          
          </c:forEach>
          <div class="clear"></div>
        </div>
      </c:forEach>
      
    </div>
    
    <jsp:include page="include/footer.jsp" />
  
  
    <!-- Dialogs -->
    
    <div id="createRaidDialog" title="Create Raid">
      <form id="createRaidForm" action="createRaid.html" method="post">
        <div class="row">
          <div class="label">Raid title:</div> 
          <div class="value"><input type="text" name="raidTitle" id="createRaidTitle" /></div>
          <div class="clear"></div>
        </div>
        
        <div class="row">
          <div class="label">Date:</div>
          <div class="value"><input type="text" name="raidDate" id="createRaidDate" /></div>
          <div class="clear"></div>
        </div>   
      </form>
    </div>
    
    <div id="signupDialog" title="Raid Signup">
      <form id="signupForm" action="signup.html" method="post">
        <input type="hidden" id="signupRaidId" name="raidId" value="" />
      
        <div class="row">
          <div class="label">Character name:</div> 
          <div class="value"><input type="text" name="characterName" id="characterName" /></div>
          <div class="clear"></div>
        </div>
        
        <div class="row">
          <div class="label">Role:</div>
          <div class="value">
            <select name="role">
              <option value="Tank">Tank</option>
              <option value="Healer">Healer</option>
              <option value="DPS">DPS</option>
            </select>
          </div>
          <div class="clear"></div>
        </div>
        
        <div class="row">
          <div class="label">Status:</div>
          <div class="value">
            <label for="signupStatusAvailable">Available</label>
            <input name="status" id="signupStatusAvailable" type="radio" value="Available" />
            
            <label for="signupStatusUnavailable">Unavailable</label>
            <input name="status" id="signupStatusUnavailable" type="radio" value="Unavailable"  />
          </div>
          <div class="clear"></div>
        </div>
        
      </form>
    </div>
  </body>
</html>
